/**
 * 使用rem实现屏幕适配布局，主要适用于移动端
 * 监听浏览器窗口大小，针对不同屏幕尺寸调整根元素字体大小，从而实现各个尺寸屏幕的适配
 */
(function (doc, win) {
    // 返回文档的根节点
    var docEl = doc.documentElement
    // 判断窗口有没有orientationchange翻转设备事件，有就返回orientationchange，没有就返回resize
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    var recalc = function () {
        // 获取窗口的宽度
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        if (clientWidth <= 750) {
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
        } else {
            docEl.style.fontSize = '100px'
        }

        docEl.getElementsByTagName('body')[0].style.fontSize = '16px'
    }

    if (!doc.addEventListener) return
    // 当窗口缩放 或 屏幕水平垂直翻转时，计算html根元素的大小
    win.addEventListener(resizeEvt, recalc, false)
    // 当dom加载完成时，计算html根元素的大小
    doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)
